<template>
    <el-form v-if="type == false" ref="ruleFormRef" style="width: 100%" :model="ruleForm" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <el-descriptions :column="2" border >
            <el-descriptions-item >
                <template #label>
                    <div class="cell-item">项目名称</div>
                </template>
                <div style="width: 320px;"><component :is="projectSelect" :data=ruleForm.project_id @onProjectSelect="onProjectSelect" /></div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">申请日期</div>
                </template>
                <div><el-text>{{ _date }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item">用途　　</div>
                </template>
                <el-input v-model="ruleForm.purpose" type="textarea" :autosize="{ minRows: 4 }"  />
                <div class="mt10">选择资料：</div>
                <div class="mt10"><component :is="certAllSelect" :data=ruleForm.cert_id @onCertSelect="onCertSelect" /></div>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">申请人　</div>
                </template>
                <el-text>{{ user.name }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">有效期　</div>
                </template>
                <el-date-picker style="width: 150px" v-model="ruleForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-descriptions-item>
        </el-descriptions>
        <el-divider />
        <div class="text-center">
            <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        </div>
    </el-form>
    <div v-if="type == true">
        <el-descriptions :column="2" border >
            <el-descriptions-item width="100">
                <template #label>
                    <div class="cell-item">项目名称</div>
                </template>
                <div style="width: 320px;"><el-text>{{ ruleForm.project.title }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item width="100">
                <template #label>
                    <div class="cell-item">申请日期</div>
                </template>
                <div style="width: 150px"><el-text>{{ ruleForm.created_at }}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item width="100" :span="2">
                <template #label>
                    <div class="cell-item">用途</div>
                </template>
                <div><el-text>{{ ruleForm.purpose }}</el-text></div>
                <div class="mt10" v-for="item in ruleForm.certs">证书名称：<el-text>{{ item.title }};</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item width="100">
                <template #label>
                    <div class="cell-item">申请人</div>
                </template>
                <el-text>{{ ruleForm.user.name }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item width="100">
                <template #label>
                    <div class="cell-item">有效期</div>
                </template>
                <el-text>{{ ruleForm.end_date }}</el-text>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
  
<script lang="ts" setup>
import { ref,watch } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance} from 'element-plus'
import http from '../util/request';
import projectSelect from "@/components/projectSelect.vue";
import certAllSelect from "@/components/certAllSelect.vue";
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)
const _date = ref<any>('')
const type = ref<boolean>(false)
const loading = ref<boolean>(false)
interface RuleForm {
    id:number
    cert_id: string
    title:string
    project_id:number,
    user_id:number
    purpose:string
    end_date:string
    created_at:string
    user:any
    project:any
    certs:any
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    cert_id: '',
    title:'/',
    project_id:0,
    user_id:0,
    purpose:'/',
    end_date:'',
    created_at:'',
    user:{},
    project:{},
    certs:[],
    
})

const onGetData = () => {
    const date = new Date();
    const isoString = date.toISOString(); // 输出：2023-10-05T14:30:00.000Z
    _date.value = isoString.split('T')[0]; // 截取日期部分
    http.get('/down/'+ruleForm.value.cert_id).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            user = ruleForm.value.user
        }
    })
}

const props = defineProps<{
    data:any
    type:boolean
}>()

watch(props,()=>{
    ruleForm.value.cert_id = props.data
    type.value = props.type
    onGetData()
},{ immediate: true })

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/down',ruleForm.value)
            }else{
                request = http.put('/down',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                onSave()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onProjectSelect = (data:number) => {
    ruleForm.value.project_id = data
}

const onCertSelect = (data:number) => {
    ruleForm.value.cert_id = JSON.stringify(data)
}

const onSave = () => {
    emit('onSave')
}

const emit = defineEmits(['onSave'])
</script>

<style scoped>
.cell-item{width: 70px;}
.el-tab-pane{height: calc(100vh - 25vh);overflow-y: scroll;}
::v-deep .el-form-item .el-form-item__label {
  font-size: 16px; /* 或者你想要的任何大小 */
}
::v-deep .el-tabs__item{font-size: 18px !important;}
</style>
